<template>
  <div style="margin:10px">
   <span style="font-family:Arial, Helvetica, sans-serif;font-size:24px">益心理学</span> <span style="margin-left:20px"> {{ say }}</span>
  </div>
  <div :class="{ hideBar: isCollapse }">
  <div style="background-color: antiquewhite" >
        <el-icon :size="25" v-if="isCollapse == true" @click="hideSideBar" style="margin-left:10px">
          <ArrowRight />
        </el-icon>
        <el-icon :size="25" v-if="isCollapse == false" @click="hideSideBar" style="margin-left:190px">
          <ArrowLeft />
        </el-icon>
      </div>
    <el-aside>
      <el-scrollbar height="640px">
        <el-menu class="el-menu-vertical-demo" :default-openeds="['1']" router :collapse="isCollapse">
          <el-sub-menu index="1">
            <template #title>
              <el-icon>
                <Search />
              </el-icon><span>医学系统</span>
            </template>
            <el-menu-item index="/yian">医案检索</el-menu-item>
            <el-menu-item index="/zizhen">自诊系统</el-menu-item>
          </el-sub-menu>
          <el-sub-menu index="2">
            <template #title>
              <el-icon>
                <Notebook />
              </el-icon><span>心理学</span>
            </template>
            <el-menu-item index="2-1">婚姻</el-menu-item>
            <el-menu-item index="2-2">女性诗歌</el-menu-item>
            <el-menu-item index="2-3">育儿</el-menu-item>
          </el-sub-menu>
          <el-sub-menu index="3">
            <template #title>
              <el-icon>
                <School />
              </el-icon><span>儿童教育</span>
            </template>
            <el-menu-item index="3-1">德育</el-menu-item>
            <el-menu-item index="3-2">语言</el-menu-item>
            <el-menu-item index="3-3">音乐</el-menu-item>
          </el-sub-menu>
        </el-menu>
      </el-scrollbar>
    </el-aside>
    <el-main>
      <router-view></router-view>
    </el-main>
  </div>
</template>

<script>
import { Notebook, School, Search, ArrowRight, ArrowLeft } from '@element-plus/icons-vue'
import { ref } from 'vue'
export default {
  components: {
    Notebook,
    School,
    Search,
    ArrowRight,
    ArrowLeft,
    ref
  },
  data() {
    return {
      isCollapse: true,
      say:"失败是成功之母 ——爱迪生"
    }
  },
  methods: {
    hideSideBar: function () {
      this.isCollapse = this.isCollapse ? false : true
    }
  }
}
</script>


<style lang="scss">
.el-aside {
  transition: width 0.28s;
  position: fixed;
  width: 210px;
}

.el-main {
  transition: margin-left .28s;
  margin-left: 210px;
  position: relative;
  height: 700px;
}

.hideBar {
  .el-aside {
    width: 0 !important;
  }

  .el-main {
    margin-left: 0px;
  }
}

.hamburger {
  display: inline-block;
  vertical-align: middle;
  width: 20px;
  height: 20px;
}

.hamburger.is-active {
  transform: rotate(180deg);
  margin-left: 210px;
  transition: margin .28s;
}
</style>
